<template>
	<view :style="{height:windowHeight+'px'}">
		
			<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" right-icon="settings-filled" left-text="返回" title="告警查询" @clickLeft="back"  @clickRight="showDrawer('showRight')"/>
			<uni-section padding="0 10px" title="">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="itemsWithCount" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<uni-search-bar placeholder="输入告警名称/位置/处理人" bgColor="#F3F3F3" @confirm="search" />
					<uni-card  :isFull="true">
						<view class="flex-b">
							<view class="line20">
								<view class="flex-b"><image class="imageSize" src="../../static/icon/zuobiao.png" mode=""></image> <text class="titleposition ml5">大庆区xxx站点信息</text> </view>
								<view><text>告警名称：</text><text>北京市大兴区双龙大道102号</text></view>
								<view><text>持续时长：</text><text>2小时</text></view>
								<view><text>处理人：</text><text>唐銮</text></view>
							</view>
							<view class="lineRight">
								<uni-tag text="一般" v-if="current === 0"
									custom-style="background-color: #ffd70e; border-color: #ffff00; color: #fff;">
								</uni-tag>
								<uni-tag  text="重要" type="warning" v-if="current === 1"/>
								<uni-tag  text="严重" type="error" v-if="current === 2"/>
							</view>
						</view>
						<view class="cardStyle">
							<view class="jindu"><text class="blue">[进行中]</text><text class="ml5">等待处理：0天12小时。</text></view>
							<view class="chakan" @click="detail"><uni-tag :inverted="true" text="查看" type="primary"/></view>
						</view>
					</uni-card>
					<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<view class="close">
									<view>
										<uni-notice-bar scrollable single text="请筛选需要查看的站点告警"></uni-notice-bar>
									</view>
								</view>
								<view class="info-content" v-for="(item,index) in 8" :key="item">
									<view class="flex-b">
										<image style="width: 1.8rem;height: 1.8rem;" src="../../static/icon/house.png" mode=""></image>
										<text class="ml5">凤凰山</text>
										<text class="numStyle ml5">({{index+1}})</text>
									</view>
								</view>
								<view class="close">
									<button  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></button>
								</view>
							</scroll-view>
						</view>
					</uni-drawer>
				</view>
			</uni-section>
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				showRight: false,
				items: ['一般报警', '重要告警', '严重告警'],
				counts: [10, 6, 3], // 假设每个告警类型对应的数量
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text'
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
			itemsWithCount() {
				return this.items.map((item, index) => `${item} (${this.counts[index]})`);
			  },
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选项卡选择
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//查看详情
			detail(e) {
				uni.navigateTo({
					url:'/pages/waring/detail'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			
	// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
				// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.uni-card{
			margin: 0.8rem 0 !important;
		}
		
		.imageSize{
			width: 1.5rem;
			height: 1.5rem;
		}
		
		.ml5{
			margin-left: 1rem;
		}
		padding: 20rpx 0;

		.flex-b{
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			.line20{
				width: 80%;
				view{
					line-height: 1.8rem;
				}
			}
			.lineRight{
				width: 20%;
				display: flex;
				    flex-direction: column;
				    align-items: center;
			}
			
			.titleposition{
				font-size: 1rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 800;
			
			}
		}
		.cardStyle{
			display: flex;
			align-items: center;
			width: 100%;
			height: 2rem;
			background-color: #f3f3f3;
			padding: 0.2rem;
			.jindu{
				width: 80%;
				.blue{color: #0289FF;}
			}
			.chakan{
				width: 20%;
				text-align: center;
			}
		
		}
		.example-body {
			padding: 10px;
		}
		.scroll-view {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex:1
		}
		// 处理抽屉内容滚动
		.scroll-view-box {
			flex: 1;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.info {
			padding: 15px;
			color: #666;
		}
		
		.info-text {
			font-size: 14px;
			color: #666;
		}
		.info-content {
			padding: 5px 15px;
		}
		.close {
			padding: 10px;
		}
	}
</style>
